<template>
  <div id="charView" style="height: 84vh">
    <div class="q-pa-md row justify-center" style="height: 80%; overflow-y: scroll">
      <div style="width: 100%; max-width: 400px">
        <div v-for="(item,idx) in messages" :key="idx">
          <q-chat-message v-if="item.userId === loginUser.userId"
                          :name="item.nickName"
                          :avatar="item.avatar"
                          :text="[item.content]"
                          :stamp="item.time"
                          text-html
                          sent
                          bg-color="amber-7"
                          size="6"
          />
          <q-chat-message v-else
                          :name="item.nickName"
                          :avatar="item.avatar"
                          :text="[item.content]"
                          :stamp="item.time"
                          bg-color="amber-7"
                          text-html
                          size="6"
          />
        </div>
      </div>
    </div>
    <div style="height: 15%; padding: 5px; ">
      <q-btn padding="5px" color="green" icon-right="send" label="发送" style="margin: 0" @click="sendMessage"/>
      <q-editor v-model="message" min-height="1rem"/>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import {useStore} from "vuex";
import {Message} from "@arco-design/web-vue";

const messages = ref([])
const message = ref("");
const store = useStore();
let ws = null;
const loginUser = ref({});
watch(
    () => store.getters["room/messages"],
    () => {
      messages.value = store.getters["room/messages"]
    },
    {deep: true}
)
const sendMessage = () => {
  if (message.value === "") {
    Message.warning("请输入内容再发送");
    return;
  }
  console.log(ws)
  ws.send(message.value);
  message.value = "";
}

onMounted(async () => {
  loginUser.value = await store.dispatch("user/getLoginUser")
  ws = await store.getters["room/websocket"];
})
</script>

<style scoped>

</style>
